import { useControllableValue } from 'ahooks';
import { ColorPicker, DatePicker, Input, InputNumber, Switch } from 'antd';
import dayjs from 'dayjs';

import Upload from '@/components/upload';

import { SettingType } from '@/enum/setting';

export type ControlProps = {
  settingType?: SettingType;
  placeholder?: string;
  value?: unknown;
  onChange?: (value: unknown) => void;
};

const Control: React.FC<ControlProps> = ({ settingType, placeholder, ...rest }) => {
  const [value, setValue] = useControllableValue(rest);

  // 长文本
  if (settingType === SettingType.text) {
    return (
      <Input.TextArea
        value={value}
        onChange={(e) => {
          setValue(e.target.value);
        }}
        allowClear
        placeholder={placeholder}
      />
    );
  }

  // 短整型 长整型
  if ([SettingType.int, SettingType.long].includes(settingType!)) {
    return <InputNumber value={value} onChange={setValue} placeholder={placeholder} />;
  }

  // 布尔
  if (settingType === SettingType.bool) {
    return <Switch checked={value === 'true'} onChange={(e) => setValue(String(e))} />;
  }

  // 时间
  if (settingType === SettingType.date) {
    return (
      <DatePicker
        value={value ? dayjs(value) : undefined}
        onChange={(e) => {
          setValue(e ? e.format('YYYY-MM-DD HH:mm:ss') : undefined);
        }}
        placeholder={placeholder}
        allowClear
      />
    );
  }

  // 时间范围 逗号分割
  if (settingType === SettingType.scopeDate) {
    const [start, end] = (value as string).split(',').map((v) => (v ? dayjs(v) : undefined));

    return (
      <DatePicker.RangePicker
        value={[start, end]}
        onChange={(e) => {
          const newValue = e ? e.map((v) => v?.format('YYYY-MM-DD HH:mm:ss')).join(',') : undefined;
          setValue(newValue);
        }}
        placeholder={placeholder ? [placeholder, placeholder] : undefined}
        allowClear
      />
    );
  }

  // 颜色
  if (settingType === SettingType.colour) {
    return <ColorPicker value={value} onChange={setValue} allowClear />;
  }

  // 图片
  if (settingType === SettingType.picture) {
    return (
      <Upload
        value={value}
        onChange={setValue}
        accept="image/*"
        listType="picture-card"
        maxCount={1}
        showUploadList={false}
      >
        {(file) => {
          if (file) {
            if (file.status === 'uploading') {
              return <div>上传中...</div>;
            }

            if (file.status === 'error') {
              return <div>上传失败</div>;
            }

            return <img src={file.url} />;
          }

          return <div>上传图片</div>;
        }}
      </Upload>
    );
  }
  // 多图片
  if (settingType === SettingType.pictures) {
    // TODO
  }
  // 文件
  if (settingType === SettingType.file) {
    // TODO
  }
  // 多文件
  if (settingType === SettingType.files) {
    // TODO
  }

  return (
    <Input
      value={value}
      onChange={(e) => {
        setValue(e.target.value);
      }}
      allowClear
      placeholder={placeholder}
    />
  );
};

export default Control;
